Save Chart State with TS

With TS-Chart-SDK, you can save your chart state that you want to have when you reinitialize the chart. You can also save these properties for the current custom chart when you hit the save button in the action menu for the answer in ThoughtSpot.

There are two ways to achieve this:

1. Using keys that are defined in persistedVisualPropsKeys and storing these key-value pairs in visualProps.
2. Using a default clientState key in the custom visualProp event.

Before using any of these, you need to be aware of the ChartToTsEvent.updateVisualProps event. This event basically takes visualProps and updates the chart visualization on the TS side with the value provided in props. The value that will be persisted should either be a key in the visualPropEditorDefinition or should be a key defined in persistedVisualPropsKeys or clientState.

Here is the sample code to achieve the above:

const visualProps = {
  ...getVisualProps(), // get your existing visual props.
  clientState: "<your custom client state>", // add new key clientState.
};
ctx.updateVisualProps(visualProps);

NOTE: The value of clientState can be a string only. So if you are trying to pass a JSON, you can use JSON.stringify to convert it to a string.

To use persistedVisualPropsKeys, you need to define an array with persistedVisualProps. You can use the following code:

(async () => {
  const ctx = await getChartContext({
    // Initialize other params
    persistedVisualPropKeys: ["customClientState1"],
    // Initialize other params
  });
})();

Here is image of console view of customChart updateChartModel with TS:

NOTE: Try to make these keys as unique as possible to avoid collisions with other custom chart keys while switching between charts.

Now you can update visualProps in the following way:

const visualProps = {
  ...getVisualProps(),
  clientState: "<your custom client state>",
  customClientState1: "<your custom client state 1>",
};
ctx.updateVisualProps(visualProps);